<template>
	<div class="app-container">
		<div class="content">
			<nextnav :navnum='navnum'></nextnav>
			<div class="information">
				<p>{{list.batchName}}<span v-if="list.isReward" class="add">附加</span></p>
				<div class="information_cont">
					<div class="information_top">
						<p>
							<span class="textname">保险公司：</span>
							<span class="textmodel">{{list.insuranceName}}</span>
						</p>
						<p>
							<span class="textname">有效日期：</span>
							<span class="textmodel">{{list.effectiveDate}}</span>
							<span class="textname">到</span>
							<span class="textmodel" v-if="list.expiryDate">{{list.expiryDate}}</span>
							<span class="textmodel" v-else>不限</span>
						</p>
						<p>
							<span class="textname">匹配日期类型：</span>
							<span class="textmodel">{{list.matchDateType}}</span>
						</p>
					</div>
					<div class="information_top">
						<p>
							<span class="textname">适用公号：</span>
							<span class="textmodel" v-for="(item,index) in list.staffNames">
								{{list.insuranceName}}-{{item.staffAccount}}-({{item.describe}})
							<span class="xian" v-if="index!=list.staffNames.length-1">|</span></span>
						</p>
					</div>
				</div>
			</div>
			<div class="Insurance">
				<div class="Insurance_top">
					<div class="Insurance_name">车辆</div>
					<div class="Insurance_num">
						<p class="num_name"><span>交强险</span><span>商业险</span></p>
						<div class="classification">
							<p><span>佣金</span><span>奖励</span></p>
							<p><span>佣金</span><span>奖励</span></p>
						</div>
					</div>
					<p class="operation">操作</p>
				</div>
				<div class="Insurance_content" v-for="item in data">
					<p class="firstname">{{item.name}}</p>
				<div class="firstcontent" v-if="item.data==''">
					<div class="seconeout">
						<p class="secondname"></p>
						<div class="threeout">
							<div class="threecontent">
								<p class="threenme"></p>
								<div class="threenumcontent">
									<div class="onenum" v-for="modl in ppp[item.row].datas">
										<input class="numinp" v-model="modl.name" size="mini" placeholder="请输" />
										<span>&nbsp;%</span>
									</div>
								</div>
								<p class='godetails'>查看详情</p>
				
							</div>
				
						</div>
					</div>
				</div>
					<div class="firstcontent" v-else>
						<div class="seconeout" v-for="list in item.data">
							<p class="secondname">{{list.name}}</p>
							<div class="threeout">
								<div class="threecontent" v-if="list.data==''">
									<p class="threenme"></p>
									<div class="threenumcontent">
										<div class="onenum" v-for="modl in ppp[list.row].datas">
											<input class="numinp" v-model="modl.name" size="mini" placeholder="请输" />
											<span>&nbsp;%</span>
										</div>
										<!--<template v-if="val.row">
											
											<div class="onenum" v-for="modl in ppp[val.row].datas">
												{{modl}}
											</div>
										</template>-->
									</div>
									<p class='godetails'>查看详情</p>

								</div>
								<div class="threecontent" v-else v-for="val in list.data">
									<p class="threenme">{{val.name}}111</p>
									<div class="threenumcontent" v-if="val.row">
										<div class="onenum" v-for="modl in ppp[val.row].datas">
											<input class="numinp" v-model="modl.name" size="mini" placeholder="请输" />
											<span>&nbsp;%</span>
										</div>
									</div>
									<p class='godetails'>查看详情</p>
									
									
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import nextnav from '../assembly/nextnav'
	export default {
		data() {
			return {
				navnum: 2,
				list: {},
				batchId: "",
				id: "",
				data: [{
						name: "家庭自用6座以下1",
						data: [{
								name: "不含车损险业务",
								row: 0,
								data: ''
							},
							{
								name: "含车损险业务",
								data: [{
										name: "新车购置价30万（含）以下新车购置价30万（含）以下11",
										data:[
											{name:"地4列1",row:1},
											{name:"地4列2",row:2},
										]
									},
									{
										name: "新车购置价30万~50万（含22",
										row: 2,
										data:""
									},
									{
										name: "新车购置价80万（含）以下",
										row: 3
									},
									{
										name: "新车购置价130万（含）以下",
										row: 4
									}
								]
							},
						]
					},
					{
						name: "家庭自用6座以下2",
						data: [{
								name: "不含车损险业务",
								row: 5,
								data: ""
							},
							{
								name: "含车损险业务",
								data: [{
										name: "新车购置价30万（含）以下",
										row: 6
									},
									{
										name: "新车购置价30万~50万（含）",
										row: 7
									},
								]
							}

						]
					},
					{
						name: "家庭自用6座以下3",
						row: 8,
						data:""
					}
				],
				ppp: [{
						row: 0,
						datas: [{
								name: 1
							},
							{
								name: 1
							},
							{
								name: 1
							},
							{
								name: 1
							}
						]
					},
					{
						row: 1,
						datas: [{
								name: 2
							},
							{
								name: 2
							},
							{
								name: 2
							},
							{
								name: 2
							}
						]
					},
					{
						row: 2,
						datas: [{
								name: 3
							},
							{
								name: 3
							},
							{
								name: 3
							},
							{
								name: 3
							}
						]
					},
					{
						row: 3,
						datas: [{
								name: 4
							},
							{
								name: 4
							},
							{
								name: 4
							},
							{
								name: 4
							}
						]
					},
					{
						row: 4,
						datas: [{
								name: 4
							},
							{
								name: 4
							},
							{
								name: 4
							},
							{
								name: 4
							}
						]
					},
					{
						row: 5,
						datas: [{
								name: 5
							},
							{
								name: 5
							},
							{
								name: 5
							},
							{
								name: 5
							}
						]
					},
					{
						row: 6,
						datas: [{
								name: 6
							},
							{
								name: 6
							},
							{
								name: 6
							},
							{
								name: 6
							}
						]
					},
					{
						row: 7,
						datas: [{
								name: 7
							},
							{
								name: 7
							},
							{
								name: 7
							},
							{
								name: 7
							}
						]
					},
					{
						row: 8,
						datas: [{
								name: 8
							},
							{
								name: 8
							},
							{
								name: 8
							},
							{
								name: 8
							}
						]
					},
				]
			}
		},
		mounted() {
			console.log(this.$route.query.batchId)
			this.batchId = this.$route.query.batchId
			this.id = this.$route.query.id
			this.getinter()
			this.getpolicy()
		},
		methods: {
			//获取信息
			getinter() {
				let params = {
					id: this.batchId
				};
				this.post(params, "services/app/policy/GetPolicyBatchBasic").then(res => {
					this.list = res.result
				});
			},
			getpolicy() {
				let params = {
					id: this.id
				};
				this.post(params, "services/app/policy/GetPolicyListByTemplate").then(res => {
					console.log("success")
					console.log(res)
				});
			}

		},
		components: {
			nextnav
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
	}
	
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
	}
	
	.information {
		width: 100%;
		min-height: 120px;
		.add {
			width: 20px;
			height: 14px;
			background: #FF9430;
			border-radius: 8px;
			font-size: 10px;
			color: #FFFFFF;
			letter-spacing: 0;
			margin-left: 16.5px;
		}
		p {
			font-size: 14px;
			color: #333333;
			line-height: 20px;
		}
		.information_cont {
			width: 100%;
			height: 80px;
			background: #EAF5FB;
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.information_top,
			.information_bom {
				width: 100%;
				height: 40px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				p {
					margin-left: 30px;
					font-size: 12px;
					.textname {
						color: #95BACC;
					}
					.textmodel {
						color: #40819E;
						.xian {
							margin-left: 10px;
							margin-right: 10px;
						}
					}
				}
				p:not(:first-of-type) {
					margin-left: 50px;
				}
			}
		}
	}
	
	.Insurance {
		width: 100%;
		min-height: 80px;
		margin-top: 30px;
		margin-bottom: 100px;
		.Insurance_top {
			width: 100%;
			height: 80px;
			background: #334750;
			font-size: 14px;
			color: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.Insurance_name {
				width: 489px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.Insurance_num {
				width: 397px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				.num_name {
					width: 100%;
					height: 40px;
					border-bottom: 1px solid #53707D;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					span {
						display: block;
						width: 50%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.classification {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					p {
						width: 50%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						span {
							width: 50%;
							display: block;
							text-align: center;
						}
					}
				}
			}
			.operation {
				width: 119px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.Insurance_content {
		width: 100%;
		min-height: 40px;
		display: flex;
		.firstname {
			width: 137px;
			min-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			word-break: break-all;
			padding: 0 10px;
		}
		.firstcontent {
			width: 868px;
			min-height: 40px;
			display: flex;
			flex-direction: column;
			.seconeout {
				width: 100%;
				min-height: 40px;
				display: flex;
				justify-content: flex-start;
				.secondname {
					width: 121px;
					display: flex;
					align-items: center;
					padding: 0 10px;
					word-break: break-all;
				}
				.threeout {
					width: 747px;
					min-height: 40px;
					display: flex;
					flex-direction: column;
					.threecontent {
						width: 100%;
						display: flex;
						.threenme {
							width: 231px;
							min-height: 40px;
							display: flex;
							align-items: center;
							padding: 10px 10px;
							word-break: break-all;
						}
						.godetails {
							width: 119px;
							min-height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 13px;
							color: #027DCA;
						}
						.threenumcontent {
							width: 397px;
							min-height: 40px;
							display: flex;
							align-items: center;
							.onenum {
								flex: 1;
								min-height: 40px;
								display: flex;
								justify-content: center;
								align-items: center;
								padding:10px 0;
								.numinp {
									width: 50px;
									height: 22px;
									outline: none;
									background: #E8E8E8;
									border: 1px solid #999999;
									text-align: right;
								}
							}
						}
					}
				}
			}
		}
	}
</style>